// 模态框样式
.modal {
	setPosition(fixed);
	z-index: 10;
	transition: all 0.5s;

	.mask {
		// 全屏
		setPosition(fixed);
		background-color: $colorI;
		opacity: 0.5;
	}

	&.slide-enter-active {
		top: 0;
	}
	// enter要在enter-active的下面
	&.slide-enter {
		top: -100%;
	}

	&.slide-leave-active {
		top: -100%;
	}

	.modal-dialog {
		setPosition(absolute, 40%, 50%, 660px, auto);
		background-color: $colorG;
		transform: translate(-50%, -50%);

		.modal-header {
			setHeight(60px)
			background-color: $colorJ;
			padding: 0 25px;
			font-size: $fontI;

			.icon-close {
				positionImg(absolute, 23px, 25px, 14px, 14px, '/imgs/icon-close.png');
				transition: transform 0.3s;

				&:hover {
					transform: scale(1.5);
				}
			}
		}

		.modal-body {
			padding: 42px 40px 54px;
			font-size: 14px;
		}

		.modal-footer {
			height: 82px;
			line-height: 82px;
			text-align: center;
			background-color: $colorJ;
		}
	}
}